import { Input, InputNumber, Select } from 'ant-design-vue'

interface Props {
    onChange: (value: any) => void
}

interface Component {
    name: string
    component: any
    configure: {
        data: (props: Props) => Record<string, any>
    }
}

export const components: Record<string, Component> = {
    'Input': {
        name: '输入框',
        component: Input,
        configure: {
            data: ({ onChange }) => {
                return {
                    value: '',
                    onBlur: (e: any) => {
                        onChange(e.target.value)
                    }
                }
            }
        }
    },
    'InputNumber': {
        name: '数字输入框',
        component: InputNumber,
        configure: {
            data: ({ onChange }) => {
                return {
                    style: {
                        width: '100%'
                    },
                    value: undefined,
                    onBlur: (e: any) => {
                        onChange(e.target.value)
                    }
                }
            }
        }
    },
    'Select': {
        name: '选择器',
        component: Select,
        configure: {
            data: ({ onChange }) => {
                return {
                    style: {
                        width: '100%'
                    },
                    value: '',
                    options: [],
                    onChange: (value: any) => {
                        onChange(value)
                    }
                }
            }
        }
    }
}
